<template>
  <div class="v-user-mgt">
    <c-row-search>
      <el-form :model="form" ref="form" inline @submit.native.prevent>
        <el-form-item prop="keywordSearch">
          <el-input
            v-model="form.keywordSearch"
            clearable
            @keyup.enter.native="search"
            :placeholder="tplLang('text_asset_a', ['btn_search_a'])"
          >
            <c-icon slot="prefix" name="search" prefix></c-icon>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">
            {{ multLang('btn_search_a') }}
          </el-button>
          <el-button @click="reset">
            {{ multLang('btn_rst_a') }}
          </el-button>
        </el-form-item>
        <el-form-item>
          <c-popover-form>
            <el-form :model="popperForm" ref="popperForm" label-width="128px">
              <c-row :col="6">
                <c-col>
                  <el-form-item
                    :label="multLang('title_ba_m', 'title_pf', ':')"
                    prop="positionSearch"
                  >
                    <c-mult-select
                      clearable
                      v-model="popperForm.positionSearch"
                      :options="groupPosition.data"
                      :placeholder="tplLang('text_choose_a', ['title_pf'])"
                    >
                    </c-mult-select>
                    <!-- <c-cascader
                      multiple
                      v-model="popperForm.positionSearch"
                      clearable
                      :options="groupPosition.data"
                      :placeholder="multLang('title_m')"
                    >
                    </c-cascader> -->
                  </el-form-item>
                </c-col>
                <c-col>
                  <el-form-item
                    :label="multLang('title_aal_n', ':')"
                    prop="statusSearch"
                  >
                    <c-select
                      clearable
                      v-model="popperForm.statusSearch"
                      :options="isEnableList"
                      :placeholder="multLang('title_m')"
                    >
                    </c-select>
                  </el-form-item>
                </c-col>
              </c-row>
            </el-form>
          </c-popover-form>
        </el-form-item>
      </el-form>
      <template #right>
        <el-button
          type="primary"
          @click="$router.push({ name: Routes.UserAdd })"
        >
          <c-icon name="plus"></c-icon>

          {{ multLang('btn_new_a') }}
        </el-button>
        <c-select-more @command="moreActions">
          <el-button type="primary">
            {{ multLang('btn_more_a') }}
            <c-icon name="down"></c-icon>
          </el-button>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="exportSelect">
              {{ multLang('btn_export_a') }}
            </el-dropdown-item>

            <el-dropdown-item command="exportAll">
              {{ multLang('btn_export_b') }}
            </el-dropdown-item>

            <el-dropdown-item command="exportType">
              {{ multLang('btn_import_b', 'title_fu') }}
            </el-dropdown-item>

            <!-- <el-dropdown-item command="batchDel">
              {{ multLang('text_ap') }}
            </el-dropdown-item> -->
          </el-dropdown-menu>
        </c-select-more>
      </template>
    </c-row-search>
    <c-table-page
      class="v-user-mgt-table"
      :data="table.data"
      :col="col"
      :vol="table.vol"
      select
      @select-change="selectChange"
      :total="page.total"
      :page.sync="page.current"
      :size.sync="page.size"
      @page-change="pageChange"
      @switch-change="switchChange"
    >
      <template #opn="{ row }">
        <el-button type="text" @click="edit(row)">
          <c-icon name="edit"></c-icon>
          <span>
            {{ multLang('btn_edit_a') }}
          </span>
        </el-button>

        <el-button type="text" @click="del(row)">
          <c-icon name="delete"></c-icon>
          <span>
            {{ multLang('btn_delete_a') }}
          </span>
        </el-button>

        <el-button type="text" @click="resetPassword(row)">
          <c-icon name="lock"></c-icon>
          <span>
            {{ multLang('btn_rst_a', 'title_aah_f') }}
          </span>
        </el-button>
      </template>
      <!-- <template #opn>
        <el-table-column width="200px" fixed="right" align="center">
          <template slot="header" slot-scope="{}">
            {{ multLang('title_action_a') }}
          </template>
          <div slot-scope="{ row }" style="text-align: center">
            <el-button type="text" @click="edit(row)">
              <c-icon name="edit"></c-icon>
              <span>
                {{ multLang('btn_edit_a') }}
              </span>
            </el-button>

            <el-button type="text" @click="del(row)">
              <c-icon name="delete"></c-icon>
              <span>
                {{ multLang('btn_delete_a') }}
              </span>
            </el-button>

            <el-button type="text" @click="resetPassword(row)">
              <c-icon name="lock"></c-icon>
              <span>
                {{ multLang('btn_rst_a', 'title_aah_f') }}
              </span>
            </el-button>
          </div>
        </el-table-column>
      </template> -->
    </c-table-page>

    <c-user-reset-password
      :visible.sync="visibles.resetPassword"
      :info="table.click"
    ></c-user-reset-password>
  </div>
</template>
<script>
import { Routes } from '@vue/router/routes'
import { delUserData, editUserStatus, getUserData } from '@/http/api/v1/user'
import { toRoute } from '@/util/router'
import { getPositionOption } from '@/http/api/v1/org'
import CUserResetPassword from './mod/ResetPassword.vue'
export default {
  name: 'VUserMgt',
  components: { CUserResetPassword },
  props: {},
  data() {
    return {
      visibles: { resetPassword: false },
      groupPosition: {
        data: [],
        map: {}
      },
      Routes: Routes,
      form: {
        keywordSearch: ''
      },
      popperForm: {
        positionSearch: [],
        statusSearch: ''
      },
      page: {
        current: 1,
        size: 20,
        total: 0
      },
      table: {
        select: '',
        click: {},
        data: [],
        vol: [
          { key: 'title_dg', val: true },
          { key: 'title_jq', val: true },
          { key: 'title_ba_m', val: true },
          { key: 'title_fx', val: true },
          { key: 'title_created_a', val: true },
          { key: 'title_aal_n', val: true }
        ]
      }
    }
  },
  computed: {
    isEnableList() {
      return this.optionList('is_enable')
    },
    col() {
      return [
        { label: 'title_dg', prop: 'user_name' },
        { label: 'title_jq', prop: 'account' },
        { label: 'title_ba_m', prop: 'groupPositionName' },
        { label: 'title_fx', prop: 'mobile' },
        { label: 'title_created_a', prop: 'create_time' },
        {
          label: 'title_aal_n',
          prop: 'is_use',
          switch: {
            auth: true,
            list: this.isEnableList
          }
        }
      ]
    }
  },
  watch: {},
  beforeCreate() {},
  created() {
    this.setOption({ key: 'is_enable' })
    getPositionOption().then(({ data, map }) => {
      this.groupPosition.data = data
      this.groupPosition.map = map
    })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {
    this.query()
  },
  deactivated() {
    const { close } = this.$route.params
    close && this.reset()
  },
  beforeDestroy() {},
  destroyed() {},
  methods: {
    selectChange(val) {
      this.table.select = val
    },
    switchChange({ val: is_use, valBack }, row) {
      const { id, sys_user } = row || {}
      editUserStatus({ id, sys_user, is_use })
        .then(({ code }) => {
          if (code === 200) {
            this.query()
          } else {
            valBack()
          }
        })
        .catch(() => {
          valBack()
        })
    },
    pageChange() {
      this.query()
    },
    search() {
      this.page.current = 1
      this.query()
    },
    query() {
      getUserData({
        pageNumber: this.page.current,
        pageSize: this.page.size,
        ...this.form,
        ...this.popperForm
      }).then(({ data }) => {
        if (data) {
          this.table.data = data.rows || []
          this.page.total = data.total
        }
      })
    },
    edit(row = {}) {
      const { id } = row
      toRoute(Routes.UserView, {
        params: { id, edit: true }
      })
    },
    del(row = {}) {
      this.$confirm(
        this.tplLang('text_ah', ['btn_delete_a', 'title_fu']),
        this.multLang('btn_delete_a', 'title_fu'),
        {
          confirmButtonText: this.multLang('btn_sure_a'),
          cancelButtonText: this.multLang('btn_cancel_a'),
          type: 'warning',
          iconClass: 'c-icon icon-info-circle color-danger'
        }
      ).then(() => {
        const { id, sys_user } = row
        id &&
          delUserData({
            id,
            sys_user
          }).then(() => {
            this.query()
          })
      })
    },
    resetPassword(row = {}) {
      this.table.click = row
      this.visibles.resetPassword = true
    },
    reset() {
      this.$refs.popperForm.resetFields()
    },
    moreActions(cmd) {
      const fn = this[cmd]
      fn && typeof fn === 'function' && fn()
    },
    exportSelect() {},
    exportAll() {},
    exportType() {},
    batchDel() {
      this.$confirm(
        this.tplLang('text_ah', ['text_ap', 'title_fu']),
        this.multLang('text_ap', 'title_fu'),
        {
          confirmButtonText: this.multLang('btn_sure_a'),
          cancelButtonText: this.multLang('btn_cancel_a'),
          type: 'warning',
          iconClass: 'c-icon icon-info-circle color-danger'
        }
      ).then(() => {
        const id = this.table.select
        id &&
          delUserData({
            id
          }).then(() => {
            this.query()
          })
      })
    }
  }
}
</script>
<style lang="scss">
@include admin {
  .v-user {
    &-mgt {
      &-table {
        height: calc(100% - 66px);
        overflow: hidden;
      }
    }
  }
}
</style>
